<template>
  <div class="register">
    <div class="content">
      <div class="registerBox">
        <span class="title">注册</span>
        <form @submit.prevent="register">
          <div class="user">
            <label for="username">用户名:</label>
            <input
              v-model="username"
              type="text"
              id="username"
              @input="validateUsername"
              size="1"
              required
            />
            <div v-if="UnerrorMessage" ref="uNameError" class="error">
              {{ UnerrorMessage }}
            </div>
          </div>
          <div class="user">
            <label for="password">密&nbsp;&nbsp;&nbsp;码:</label>
            <input
              v-model="password"
              type="password"
              id="password"
              size="1"
              @input="validatePassword"
              required
            />
            <div v-if="PwerrorMessage" ref="pwdError" class="error">
              {{ PwerrorMessage }}
            </div>
          </div>
          <div class="toLogin">
            已有账号？<span @click="toLogin">立即登录</span>
          </div>
          <button type="submit">注册</button>
        </form>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { userRegister } from "@/api/all";
import { Message } from "element-ui";
export default {
  data() {
    return {
      username: "",
      password: "",
      usernamePass: false,
      passwordPass: false,
      UnerrorMessage: "用户名必须是 1 - 7 个汉字，不得输入特殊字符",
      PwerrorMessage:
        "密码长度应为 8 - 20 位，且必须包含至少一个大写字母、一个小写字母和一个数字",
    };
  },
  methods: {
    validatePassword() {
      const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,20}$/;
      if (!regex.test(this.password)&& this.password !== "") {
        this.$refs.pwdError.style.opacity = 1;
        this.passwordPass = false;
      } else {
        this.passwordPass = true;
        this.$refs.pwdError.style.opacity = 0;
      }
    },
    validateUsername() {
      const regex = /^[\u4e00-\u9fa5]{1,8}$/;
      if (!regex.test(this.username)&& this.username !== "") {
        this.$refs.uNameError.style.opacity = 1;
        this.usernamePass = false;
      } else {
        this.$refs.uNameError.style.opacity = 0;
        this.usernamePass = true;
      }
    },
    async register() {
      if (!this.passwordPass || !this.usernamePass)
        Message.error("用户名或密码格式错误！！！");
      else {
        let params = {
          id: 1,
          username: this.username,
          password: this.password,
          role: "user",
          image:"null"
        };
        await userRegister(params)
          .then((res) => {
            console.log(res);
            console.log(res.status);

            if (res.data.code === 200) {
              if (res.data.message === "Ok") {
                Message.success("注册成功！");
                this.$router.push({ name: "login" }); //注册成功后跳转
              } else {
                Message.error("该用户已经注册过了！！");
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    toLogin() {
      this.$router.push({ name: "login" }); //没有账号去注册
    },
  },
};
</script>
  <style scoped lang="less">
.register {
  height: 768px;
  background-repeat: no-repeat;
  background-image: url("../../assets/images/login2.png");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
}
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 350px;
  height: 450px;
  margin-top: 150px;
  margin-left: 500px;
  border-radius: 5%;
}
.content::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background-image: conic-gradient(
    transparent,
    transparent,
    transparent,
    #0d0d0d
  );
  animation: animate 4s linear infinite;
}
.content::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background-image: conic-gradient(
    transparent,
    transparent,
    transparent,
    #dbd8d8
  );
  animation: animate 4s linear infinite;
  animation-delay: -2s;
}

@keyframes animate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.registerBox {
  z-index: 1;
  width: 350px;
  height: 450px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5%;
  color: #fff;
}
.title {
  font-size: 30px;
  display: block;
  text-align: center;
  height: 70px;
  line-height: 70px;
  text-shadow: 0 0 3px #32003c;
}
form {
  margin-top: 20px;
}
.user {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  margin: 5px 20px;
  text-shadow: 0 0 3px #32003c;
}
label {
  flex: 1;
  font-size: 20px;
}
input {
  flex: 1;
  min-width: 0;
  margin-top: 10px;
  padding: 0px 10px;
  outline: none;
  border: none;
  background: none;
  background: rgba(255, 252, 252, 0.7);
  box-shadow: 1px 2px #b0aeae;
  border-radius: 5px;
  line-height: 30px;
  color: #717070;
  font-size: 15px;
  text-shadow: 0 0 3px #32003c;
}
button {
  color: #fff;
  /* 去掉默认边框 */
  border: none;
  outline: none;
  /* 去掉默认背景 */
  background-color: rgb(3, 69, 16);
  width: 90%;
  height: 30px;
  margin: 20px 15px;
  border-radius: 32px;
  font-size: 20px;
}
.toLogin {
  flex: 1;
  color: #fcfdff;
  font-size: 12px;
  padding-left: 160px;
  text-align: center;
  span {
    color: rgb(161, 23, 23);
  }
}
.error {
  color: red;
  font-size: 12px;
  padding: 5px 10px 0px;
  opacity: 0;
  transition: all 0.5s;
}
</style>